<template>

	<view class="container">
		<view class="beijing">
			<!-- 顶部导航部分 -->
			<view class="tabs">
				<view class="tab" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
					<view class="circle" :style="{ backgroundColor: activeTab === 0 ? '#4695f8' : '#f5f5f5' }">
						<text class="circle-text">预约服务</text>
					</view>
				</view>
				<view class="tab" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
					<view class="circle" :style="{ backgroundColor: activeTab === 1 ? '#17dfad' : '#f5f5f5' }">
						<text class="circle-text">支付订单</text>
					</view>
				</view>
				<view class="tab" :class="{ active: activeTab === 2 }" @click="switchTab(2)">
					<view class="circle" :style="{ backgroundColor: activeTab === 2 ? '#ff6600' : '#f5f5f5' }">
						<text class="circle-text">门店服务</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 动态内容部分 -->
		<view class="content">
			<view v-if="activeTab === 0">
				<view class="info-box">
					<view class="info-item">
						<text class="label">伟业汽车美容店（人民路店）</text>
						<text class="sub-label">山阳县人民中路33号</text>
					</view>
					<view class="info-item" @click="showDrawer">

						<text>张先生</text>
						<text>18656894566</text>
					</view>
					<view class="info-item">
						<text>奔驰FWE4/豫A56487</text>
					</view>
					<view class="info-item">
						<text>服务产品</text>
						<text>精洗汽车 ¥39.9</text>
					</view>
					<view class="info-item">
						<text>代金券/优惠券</text>
						<text class="discount">-10元</text>
					</view>
				</view>
				<view class="footer">
					<view class="footer-left">
						<text>联系客服</text>
					</view>
					<view class="footer-right">
						<text>合计：</text>
						<text class="total">¥39.9</text>
					</view>
					<button class="submit-btn" @click="shows">提交订单</button>
				</view>
			</view>
			<!-- 其他内容部分 -->
			<view v-else-if="activeTab === 1">
				<text>支付订单内容</text>
			</view>
			<view v-else-if="activeTab === 2">
				<text>门店服务内容</text>
			</view>
		</view>
		<uni-popup ref="popup" :width="200" type="bottom">
			<view class="dj">
				<view class="tanChuNeiRong">18656894566</view>
				<view class="tanChuNeiRong">复制</view>
				<view class="tanChuNeiRong">取消拨号</view>
			</view>
		</uni-popup>
		<uni-popup ref="popups" :width="200" type="bottom">
			<view class="djs">
				<view class="tanChuNeiRong">请输入支付密码</view>
				<view class="tanChuNeiRong">车辆服务平台</view>
				<view class="tanChuNeiRong">￥39.9</view>
				<view class="zfks">
					<view class="zfk"></view>
					<view class="zfk"></view>
					<view class="zfk"></view>
					<view class="zfk"></view>
					<view class="zfk"></view>
					<view class="zfk"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				show: false,
				activeTab: 0, // 当前激活的 tab
				uniPopup
			};
		},
		methods: {
			switchTab(index) {
				this.activeTab = index; // 切换 tab
			},
			showDrawer() {
				this.$refs.popup.open('bottom') //底部弹出
			},
			shows() {
				this.$refs.popups.open('center') //底部弹出
			},
		},
	};
</script>

<style>
	.dj {
		background: white;
		border-radius: 20px;
		height: 200px;
	}

	.djs {
		width: 600rpx;
		background: white;
		border-radius: 20px;
		height: 300px;
	}

	.tanChuNeiRong {
		width: 100%;
		text-align: center;
		margin-top: 80rpx;
		font-size: 40rpx;

	}

	.beijing {
		background-color: #4997fa;
		height: 300rpx;
		width: 100%;

	}

	/* 整体样式 */
	.container {
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航 */
	.tabs {
		margin-top: 120rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		border-radius: 8px;
		padding: 15px;

	}

	.tab {
		flex: 1;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.circle {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		display: flex;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.circle-text {
		font-size: 14px;
		color: #333333;
	}

	/* 动态内容 */
	.content {

		flex: 1;
		padding: 20px;
	}

	.info-box {
		/* margin-top: -40rpx; */
		background-color: #ffffff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid #e0e0e0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 16px;
		font-weight: bold;
	}

	.sub-label {
		font-size: 14px;
		color: #666666;
	}

	.discount {
		color: #ff6600;
		font-weight: bold;
	}

	/* 底部样式 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		border-top: 1px solid #e0e0e0;
	}

	.footer-left {
		color: #666666;
	}

	.footer-right {
		font-size: 16px;
	}

	.total {
		color: #ff6600;
		font-weight: bold;
	}

	.submit-btn {
		background-color: #4997fa;
		color: #ffffff;
		border: none;
		border-radius: 20px;
		padding: 10px 20px;
		margin-right: 0%;
	}

	.zfk {
		width: 80rpx;
		height: 80rpx;
		margin-top: 120rpx;
		background-color: #f2f2f2;
	}

	.zfks {
		display: flex;
		justify-content: space-around;

	}
</style>